import { useEffect, useState } from "react";
import "./index.scss";

function XtxNumber({
  count = 1,
  max = 10,
  min = 1,
  updateCount,
  label = true,
}: {
  count: number;
  updateCount: (val: any) => void;
  max?: number;
  min?: number;
  label?: boolean;
}) {
  const [counts, setCount] = useState(1);
  const changeCounts = function (step: number) {
    if (counts + step < min || counts + step > max) return;
    setCount(counts + step);
  };
  useEffect(() => {
    updateCount(counts);
  }, [counts, updateCount]);
  return (
    <div className="xtx-numbox">
      {label && <div className="label">数量</div>}
      <div className="numbox">
        <a href="javascript:;" onClick={() => changeCounts(-1)}>
          -
        </a>
        <input type="text" readOnly value={count} />
        <a href="javascript:;" onClick={() => changeCounts(1)}>
          +
        </a>
      </div>
    </div>
  );
}
export default XtxNumber;
